<script setup lang="ts">
import { formRules } from '@/common/utils/validators/formRules'
import { message } from 'ant-design-vue'
import { getModificationMaterials } from '@/common/service/user-service'
import type { ModificationMaterials } from '../types/user-type'
import { usePersonalData } from '@/common/stores/modules/personal-data'
const formRef = ref()
const labelCol = { style: { width: '90px' } }
const wrapperCol = { span: 12 }

const persona = usePersonalData().personalData

// 校验规则
// const persona: ModificationMaterials = reactive({
//   nickname: '', // 名称
//   avatarUrl: '', // 用户头像-
//   gender: '1', // 性别
//   intro: '', // 个人简介
//   realName: '', // 真实姓名
//   email: '', // 邮箱
//   phoneCode: '', // 电话号码
//   qqCode: '', // qq
//   bgUrl: '',
// })

// 提交时保存数据到 后端
// const onSubmit = async () => {
//   try {
//     // 修改个人资料传递给后端
//     const res = await getModificationMaterials(persona)
//     console.log(res, '传递的资料')
//     message.success('保存成功')
//   } catch (error) {
//     console.log(error, '校验成功')
//   }
// }
</script>

<template>
  <p>完善个人资料是让别人认识你的第一步</p>
  <div>
    <a-form
      :model="persona"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="formRules"
      ref="formRef"
    >
      <h2>基本信息</h2>
      <a-form-item label="昵称：" name="nickname">
        <a-input
          v-model:value="persona.nickname"
          placeholder="请输入您喜欢的昵称"
        />
      </a-form-item>

      <a-form-item label="头像：">
        <a-avatar
          shape="square"
          src="src/assets/lijie.jpg"
          :size="{ xs: 48, sm: 64, md: 80, lg: 128, xl: 160, xxl: 200 }"
        />
      </a-form-item>

      <a-form-item label="性别：">
        <a-radio-group v-model:value="persona.gender">
          <a-radio value="1">男</a-radio>
          <a-radio value="2">女</a-radio>
          <a-radio value="3">保密</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="个人介绍：">
        <a-textarea
          v-model:value="persona.intro"
          placeholder="简单介绍一下自己，比如兴趣爱好、职业等，不超过200字哦~"
        />
      </a-form-item>

      <h2>联系信息</h2>

      <a-form-item label="真实姓名：" name="realName">
        <a-input
          v-model:value="persona.realName"
          placeholder="请输入您的真实姓名，与身份证一致"
        />
      </a-form-item>

      <a-form-item label="常用邮箱：" name="email">
        <a-input v-model:value="persona.email" />
      </a-form-item>

      <a-form-item label="手机号码：" name="phoneCode">
        <a-input
          v-model:value="persona.phoneCode"
          placeholder="请输入您的手机号码"
        />
      </a-form-item>

      <a-form-item label="QQ号码：" name="qqCode">
        <a-input
          v-model:value="persona.qqCode"
          placeholder="请输入您的QQ号码"
        />
      </a-form-item>
      <!-- <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-form-item> -->
    </a-form>
  </div>
</template>

<style lang="scss" scoped>
h2 {
  margin: 1.875rem 0;
}

.alter-phone {
  color: $educ-color-primary;
  cursor: pointer;
}

// 输入框内边距
:deep .ant-input {
  padding: 8px;
}
</style>
